<template>
  <!-- 企宽在途详情 -->
  <a-modal :visible="true" :footer="null" :width="1300" @cancel="cancelModel" class="orderModal">
    <div :style="topStyle">
      <div class="infoModal">工单列表</div>
      <a-button style="margin:20px" @click="download" type="primary" icon="export">excel导出</a-button>
      <a-table
        style="margin:0px 20px 20px 20px;color:black"
        :pagination="false"
        size="small"
        rowKey="id"
        :columns="columns"
        :dataSource="userData"
        :scroll="{ x: true, scrollToFirstRowOnChange: true }"
        :loading="tableLoading"
      >
      </a-table>
      <a-row>
        <a-col :span="12"></a-col>
        <a-col :span="12" style="text-align:right">
          <a-pagination
            :show-total="total => `共有 ${total} 条数据`"
            :default-current="1"
            :total="total"
            @change="pageShow"
          />
        </a-col>
      </a-row>
      <div style="height:20px"></div>
    </div>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getQkLastDeatil, exportExcelQLastInstallsExport } from '@/api/qkApi'
export default {
  components: {},
  props: ['info'],
  data() {
    return {
      topStyle: { background: 'white' },
      queryParam: {},
      tableLoading: false,
      userData: [],
      columns,
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      total: 0,
      current: 1,
      pageSize: 10
    }
  },
  created() {
    this.queryParam = this.info
    this.queryParam.current = this.current
    this.queryParam.pageSize = this.pageSize
    this.getDetailListInfo()
  },
  mounted() {},

  methods: {
    //获取表格数据
    getDetailListInfo() {
      this.tableLoading = true
      this.queryParam.county = this.county
      getQkLastDeatil(this.queryParam)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(current) {
      this.tableLoading = true
      this.queryParam.current = current
      this.queryParam.pageSize = this.pageSize
      getQkLastDeatil(this.queryParam)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //键盘监听
    handleKeyDown(e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      if (key === 13) {
        //触发的事件
        this.selectEvent()
      }
    },
    cancelModel() {
      this.$emit('cancelEvent')
    },
    //文档导出
    download() {
      exportExcelQLastInstallsExport(this.queryParam)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '详情列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    //查询
    selectEvent() {
      this.queryParam.kj = this.kj
      this.queryParam.crmNo = this.code
      this.queryParam.county = this.county
      this.queryParam.current = 1
      this.getDetailListInfo()
    },
    moment,
    onChange(date, dateString) {
      this.queryParam.sendStartTime = dateString[0] + ' 00:00:00'
      this.queryParam.sendEndTime = dateString[1] + ' 23:59:59'
    },
    detailsShowEvent(info) {
      this.infoListData = info
      this.detailsShow = true
    },
    cancelEvent() {
      this.detailsShow = false
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}

const columns = [
  {
    title: '地市',
    dataIndex: 'city',
    align: 'center'
  },
  {
    title: '区县',
    dataIndex: 'country',
    align: 'center'
  },
  {
    title: '所属网格',
    dataIndex: 'grid',
    align: 'center'
  },
  {
    title: '定单主题',
    dataIndex: 'workSub',
    align: 'center'
  },
  {
    title: '工单编号',
    dataIndex: 'workNo',
    align: 'center'
  },
  {
    title: '宽带账号',
    dataIndex: 'account',
    align: 'center'
  },
  {
    title: '接入方式',
    dataIndex: 'accessType',
    align: 'center'
  },
  {
    title: '宽带带宽M',
    dataIndex: 'bandwidth',
    align: 'center'
  },
  {
    title: '工单状态',
    dataIndex: 'workStatus',
    align: 'center'
  },

  {
    title: '受理时间',
    dataIndex: 'acceptTime',
    align: 'center'
  },

  {
    title: '到单时间',
    dataIndex: 'orderTime',
    align: 'center'
  },

  {
    title: '预约安装时间',
    dataIndex: 'preInstallTime',
    align: 'center'
  },
  {
    title: '业务类型',
    dataIndex: 'businessType',
    align: 'center'
  },

  {
    title: '当前处理人',
    dataIndex: 'handler',
    align: 'center'
  },

  {
    title: '当前处理人手机号',
    dataIndex: 'handlerMobile',
    align: 'center'
  },

  {
    title: '地域属性',
    dataIndex: 'areaType',
    align: 'center'
  },
  {
    title: '客户经理',
    dataIndex: 'manager',
    align: 'center'
  },

  {
    title: '客户经理电话',
    dataIndex: 'managerMobile',
    align: 'center'
  },

  {
    title: '客户编码',
    dataIndex: 'companyNo',
    align: 'center'
  },

  {
    title: '数量',
    dataIndex: 'num',
    align: 'center'
  },

  {
    title: '在本批次中序号',
    dataIndex: 'serialNum',
    align: 'center'
  }
]
</script>
<style scoped>
.infoModal {
  height: 51px;
  background: #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
